<template>
    <page-wrap>
      <div class="productdetails-container">
        <div class="productdetails-container-header">
          <div class="productdetails-header-item">
            {{ businessStartTime }}
          </div>
          <div class="productdetails-header-item">&nbsp;至&nbsp;</div>
          <div class="productdetails-header-item">
            {{ businessEndTime }}
          </div>
        </div>
        <div class="turnover-container-all">
          <div class="all-item">
            <div class="all-item-upper">{{ Producedetails.TotalSaleCount }}</div>
            <div class="all-item-below">总出品数量</div>
            <div class="all-item-line"></div>
          </div>
          <div class="all-item">
            <div class="all-item-upper">{{ Producedetails.TotalSalePrice }}</div>
            <div class="all-item-below">总金额</div>
          </div>
        </div>
        <div class="productdetails-container-main">
          <div class="busDetails-main-proPoint">
            <div class="proPoint-header">
              <div class="proPoint-header-left">
                <div class="header-left-title">出品点：</div>
                <div class="header-left-value">{{proName + "吧台"}}</div>
              </div>
              
            </div>
            <div class="proPoint-center">
              <div class="proPoint-center-left">商品名称</div>
              <div class="proPoint-center-center">数量</div>
              <div class="proPoint-center-right">金额</div>
            </div>
            <div class="proPoint-footer">
              <div class="proPoint-footer-item" v-for="item in Producedetails.GoodList" :key="index">
                <div class="footer-item-left">{{ item.GoodsName }}</div>
                <div class="footer-item-center">{{ item.SaleCount }}</div>
                <div class="footer-item-right">
                  {{ item.SalePrice }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </page-wrap>
  </template>
  
  <script setup>
  import Api from '@/api'
  import dayjs from 'dayjs'
  
  const ProducePoint = ref('')
  const proName = ref('')
  const Producedetails = ref([])
  const businessStartTime = ref('')
  const businessEndTime = ref('')
  const route = useRoute()
  ProducePoint.value =  route.query.ProducePoint
  proName.value = route.query.name
  businessStartTime.value = route.query.businessStartTime
  businessEndTime.value = route.query.businessEndTime
 

// 表单
const postForm = reactive({
  producePoint:ProducePoint,
  businessStartTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
  businessEndTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
})

const loadData = async function (refresh = false) {
   //获取出品点详情
  await Api.Common.AppObjProcess.Do({
        functionName: 'GetProducePointGoodsStatistics',
        contentData: postForm
      }).then(res => {
         console.log(res,'GetProducePointGoodsStatistics--------------')
         Producedetails.value = res
      })
}

    // 初始化
    const onInit = () => {
      loadData(true)
    }
    onInit()

  </script>
  
  <style scoped lang="scss">
  @import '@/styles/l.scss';
  .productdetails-container {
    .productdetails-container-header {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      padding: 10px 12px 0 12px;
      .productdetails-header-item {
      }
    }
    .turnover-container-all {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #28282e80;
      box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
      border-radius: 8px;
      padding: 20px 0;
      margin: 10px 12px;
      .all-item {
        flex-basis: 50%;
        text-align: center;
        position: relative;
        .all-item-upper {
          line-height: 22px;
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          padding-bottom: 12px;
        }
        .all-item-below {
          line-height: 12px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
        }
        .all-item-line {
          position: absolute;
          width: 1px;
          height: 40px;
          right: 0px;
          top: 0px;
          background-image: url('@/assets/images/common/i_onwine-line.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
      }
    }
  
    .productdetails-container-main {
      padding: 0 12px;
     
    }
  }
  </style>
  